package com.google.android.catalog.app.compose.redux

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.gitee.wsl.compose.state.S
import com.gitee.wsl.compose.ui.base.Button
import com.gitee.wsl.compose.ui.base.Text
import com.gitee.wsl.compose.use.redux.Reducer
import com.gitee.wsl.compose.use.redux.ReduxProvider
import com.gitee.wsl.compose.use.redux.createStore
import com.gitee.wsl.compose.use.redux.useDispatch
import com.gitee.wsl.compose.use.redux.useSelector
import com.gitee.wsl.struct.generator.randomUUID
import com.google.android.catalog.framework.annotations.Sample


 data class Todo(val name: String, val id: String)

 sealed interface TodoAction
 data class AddTodo(val todo: Todo) : TodoAction
 data class DelTodo(val id: String) : TodoAction

/* val todoReducer: Reducer<List<Todo>, TodoAction> = { prevState: List<Todo>, action: TodoAction ->
     when (action) {
         is AddTodo -> buildList {
             addAll(prevState)
             add(action.todo)
         }
         is DelTodo ->  prevState.filter { it.id != action.id }
     }
 }*/

/* val store = createStore {
     //todoReducer with emptyList() // 使用中缀函数 with 来连接reducer函数与初始状态
     //otherReducer with OtherData("default", 18) //另一个 reducer

     reducer<List<Todo>, TodoAction>(initState = emptyList()){ prevState: List<Todo>, action: TodoAction ->
         when (action) {
             is AddTodo -> buildList {
                 addAll(prevState)
                 add(action.todo)
             }
             is DelTodo ->  prevState.filter { it.id != action.id }
         }
     }
 }*/

val store1 = createStore(initState = emptyList()){ prevState: List<Todo>, action: TodoAction ->
    when (action) {
        is AddTodo -> buildList {
            addAll(prevState)
            add(action.todo)
        }
        is DelTodo ->  prevState.filter { it.id != action.id }
    }
}

@Sample(
    name = "Compose redux sample",
    description = "Shows how to add a compose target in the catalog",
    documentation = "https://github.com/google/casa-android#create-sample-modules"
)
 @Composable
 fun UseReduxExample() {
   Column {
       ReduxProvider(store = store1) {
           Column() {
               Header()
               TodoList()
               ReduxProvider(store = store1) {
                   Column() {
                       Header()
                       TodoList()
                   }
               }
           }
       }
       ReduxProvider(store = store1) {
           Column() {
               Header()
               TodoList()
           }
       }
   }
 }

 @Composable
 fun TodoList() {
     val todos = useSelector<List<Todo>>() //需要传递 状态 的类型
     Column {
         todos.map {
             TodoItem(item = it)
         }
     }
 }

@Composable
 fun Header() {
     val dispatch = useDispatch<TodoAction>() //需要传递 Action 的类型
     val (input, setInput) = S.state("")
     Row {
         OutlinedTextField(
             value = input,
             onValueChange = setInput,
         )
         Button.Text(  text="add") {
             dispatch(AddTodo(Todo(input, randomUUID())))
             setInput("")
         }
     }
 }


 @Composable
 fun TodoItem(item: Todo) {
     val dispatch = useDispatch<TodoAction>()
     Row(modifier = Modifier.fillMaxWidth()) {
         Text(text = item.name)
         Button.Text(text = "del") {
             dispatch(DelTodo(item.id))
         }
     }
 }


